<template>
  <view class="category-page">
    <!-- 顶部搜索栏 -->
    <view class="category-search">
      <view class="category-search__box">
        <view class="category-search__icon">
          <text class="iconfont icon-search"></text>
        </view>
        <input 
          class="category-search__input" 
          placeholder="搜索服务项目" 
          v-model="searchKeyword"
          confirm-type="search"
          @confirm="handleSearch"
        />
      </view>
    </view>
    
    <!-- 分类标题 -->
    <view class="category-header">
      <view class="category-header__content">
        <view class="category-header__title-area">
          <view class="category-header__title-line"></view>
          <view class="category-header__title">{{ categoryTitle }}</view>
        </view>
        <view class="category-header__desc">{{ categoryDescription }}</view>
      </view>
    </view>
    
    <!-- 筛选栏 -->
    <view class="category-filter">
      <view 
        class="category-filter__item"
        :class="{'category-filter__item--active': sortType === 'default'}"
        @click="changeSort('default')"
      >
        <text class="category-filter__text">默认</text>
        <view class="category-filter__indicator" v-if="sortType === 'default'"></view>
      </view>
      <view 
        class="category-filter__item"
        :class="{'category-filter__item--active': sortType === 'sales'}"
        @click="changeSort('sales')"
      >
        <text class="category-filter__text">销量优先</text>
        <view class="category-filter__indicator" v-if="sortType === 'sales'"></view>
      </view>
      <view 
        class="category-filter__item"
        :class="{'category-filter__item--active': sortType === 'price'}"
        @click="changeSort('price')"
      >
        <view class="category-filter__price">
          <text class="category-filter__text">价格</text>
          <text class="category-filter__arrow" :class="{'category-filter__arrow--up': priceSort === 'asc'}">
            {{ priceSort === 'asc' ? '↑' : '↓' }}
          </text>
        </view>
        <view class="category-filter__indicator" v-if="sortType === 'price'"></view>
      </view>
    </view>
    
    <!-- 服务列表 -->
    <view v-if="serviceList.length > 0" class="category-list">
      <view 
        v-for="(item, index) in sortedServiceList" 
        :key="index" 
        class="category-item"
        @click="goToServiceDetail(item.id)"
      >
        <view class="category-item__card">
          <image :src="item.image" mode="aspectFill" class="category-item__image" />
          <view class="category-item__content">
            <view class="category-item__title">{{ item.title }}</view>
            <view class="category-item__desc">{{ item.description }}</view>
            <view class="category-item__bottom">
              <view class="category-item__price-box">
                <text class="category-item__price-symbol">¥</text>
                <text class="category-item__price">{{ item.priceValue }}</text>
                <text class="category-item__price-unit">起</text>
              </view>
              <view class="category-item__sales">{{ item.sales }}人已下单</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-else-if="!loading" class="category-empty">
      <image class="category-empty__image" src="/static/icons/empty-search.png" mode="aspectFit" />
      <view class="category-empty__content">
        <text class="category-empty__title">暂无相关服务</text>
        <text class="category-empty__desc">试试其他关键词或浏览其他分类</text>
        <view class="category-empty__btn" @click="resetSearch">清除筛选</view>
      </view>
    </view>
    
    <!-- 加载中 -->
    <view v-else class="category-loading">
      <view class="category-loading__spinner"></view>
      <text class="category-loading__text">正在加载服务...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';

// 搜索关键词
const searchKeyword = ref('');

// 分类ID和标题
const categoryId = ref(0);
const categoryTitle = ref('全部服务');
const categoryDescription = ref('涵盖校园内全部服务项目，便捷高效');

// 排序相关
const sortType = ref('default');
const priceSort = ref('desc');

// 加载状态
const loading = ref(true);

// 服务列表数据
const serviceList = ref([
  { 
    id: 1, 
    title: '快递代拿服务', 
    description: '校内各快递点代拿，30分钟送达',
    image: 'https://picsum.photos/seed/express1/300/200', 
    price: '¥3起', 
    priceValue: 3,
    sales: 235,
    categoryId: 1
  },
  { 
    id: 5, 
    title: '快递代寄服务', 
    description: '校内代寄各大快递，无需排队',
    image: 'https://picsum.photos/seed/express2/300/200', 
    price: '¥5起', 
    priceValue: 5,
    sales: 158,
    categoryId: 1
  },
  { 
    id: 2, 
    title: '远程打印服务 黑白/彩印', 
    description: '远程发送文档，快速打印配送',
    image: 'https://picsum.photos/seed/print1/300/200', 
    price: '¥0.5/页起', 
    priceValue: 0.5,
    sales: 189,
    categoryId: 2
  },
  { 
    id: 3, 
    title: '刷乐跑跑腿服务', 
    description: '帮你完成体育锻炼任务，保障达标',
    image: 'https://picsum.photos/seed/run1/300/200', 
    price: '¥8起/公里', 
    priceValue: 8,
    sales: 125,
    categoryId: 4
  },
  { 
    id: 4, 
    title: '毕业设计辅导', 
    description: '专业辅导毕业设计，保证质量',
    image: 'https://picsum.photos/seed/study1/300/200', 
    price: '¥200起', 
    priceValue: 200,
    sales: 78,
    categoryId: 3
  },
  { 
    id: 6, 
    title: 'KFC早餐代购', 
    description: '帮你购买肯德基早餐，准时送达',
    image: 'https://picsum.photos/seed/kfc1/300/200', 
    price: '¥5起', 
    priceValue: 5,
    sales: 92,
    categoryId: 5
  }
]);

// 根据分类和排序处理后的服务列表
const sortedServiceList = computed(() => {
  // 先根据分类ID筛选
  let result = [...serviceList.value];
  
  if (categoryId.value > 0) {
    result = result.filter(item => item.categoryId === categoryId.value);
  }
  
  // 再根据排序方式排序
  if (sortType.value === 'sales') {
    result.sort((a, b) => b.sales - a.sales);
  } else if (sortType.value === 'price') {
    if (priceSort.value === 'asc') {
      result.sort((a, b) => a.priceValue - b.priceValue);
    } else {
      result.sort((a, b) => b.priceValue - a.priceValue);
    }
  }
  
  return result;
});

// 页面加载
onMounted(() => {
  const page = getCurrentPages()[getCurrentPages().length - 1];
  const options = page.options;
  
  if (options && options.id) {
    categoryId.value = parseInt(options.id);
    updateCategoryInfo();
  }
  
  loading.value = false;
});

// 更新分类信息
const updateCategoryInfo = () => {
  const categoryMap = {
    1: {
      title: '代拿代寄服务',
      description: '快递代拿代寄服务，快速便捷，解决物流烦恼'
    },
    2: {
      title: '远程打印服务',
      description: '远程发送文档，快速打印配送，方便学习生活'
    },
    3: {
      title: '学习辅导服务',
      description: '专业辅导各类学习难题，助力学业进步'
    },
    4: {
      title: '刷乐跑服务',
      description: '体育锻炼代跑服务，保障学生体育达标'
    },
    5: {
      title: '代购早餐服务',
      description: '早餐代购服务，解决早起困难，营养早餐送到手'
    }
  };
  
  if (categoryMap[categoryId.value]) {
    categoryTitle.value = categoryMap[categoryId.value].title;
    categoryDescription.value = categoryMap[categoryId.value].description;
  }
};

// 搜索处理
const handleSearch = () => {
  if (!searchKeyword.value.trim()) return;
  uni.navigateTo({
    url: `/pages/service/search?keyword=${encodeURIComponent(searchKeyword.value)}`
  });
};

// 重置搜索和筛选
const resetSearch = () => {
  searchKeyword.value = '';
  sortType.value = 'default';
  priceSort.value = 'desc';
  loading.value = true;
  
  setTimeout(() => {
    serviceList.value = [
      { 
        id: 1, 
        title: '快递代拿服务', 
        description: '校内各快递点代拿，30分钟送达',
        image: 'https://picsum.photos/seed/express1/300/200', 
        price: '¥3起', 
        priceValue: 3,
        sales: 235,
        categoryId: 1
      },
      { 
        id: 5, 
        title: '快递代寄服务', 
        description: '校内代寄各大快递，无需排队',
        image: 'https://picsum.photos/seed/express2/300/200', 
        price: '¥5起', 
        priceValue: 5,
        sales: 158,
        categoryId: 1
      },
      { 
        id: 2, 
        title: '远程打印服务 黑白/彩印', 
        description: '远程发送文档，快速打印配送',
        image: 'https://picsum.photos/seed/print1/300/200', 
        price: '¥0.5/页起', 
        priceValue: 0.5,
        sales: 189,
        categoryId: 2
      },
      { 
        id: 3, 
        title: '刷乐跑跑腿服务', 
        description: '帮你完成体育锻炼任务，保障达标',
        image: 'https://picsum.photos/seed/run1/300/200', 
        price: '¥8起/公里', 
        priceValue: 8,
        sales: 125,
        categoryId: 4
      },
      { 
        id: 4, 
        title: '毕业设计辅导', 
        description: '专业辅导毕业设计，保证质量',
        image: 'https://picsum.photos/seed/study1/300/200', 
        price: '¥200起', 
        priceValue: 200,
        sales: 78,
        categoryId: 3
      },
      { 
        id: 6, 
        title: 'KFC早餐代购', 
        description: '帮你购买肯德基早餐，准时送达',
        image: 'https://picsum.photos/seed/kfc1/300/200', 
        price: '¥5起', 
        priceValue: 5,
        sales: 92,
        categoryId: 5
      }
    ];
    loading.value = false;
  }, 300);
};

// 改变排序方式
const changeSort = (type) => {
  if (type === 'price' && sortType.value === 'price') {
    // 如果已经是价格排序，切换升降序
    priceSort.value = priceSort.value === 'asc' ? 'desc' : 'asc';
  } else {
    sortType.value = type;
  }
};

// 跳转到服务详情
const goToServiceDetail = (serviceId) => {
  uni.navigateTo({
    url: `/pages/service/detail?id=${serviceId}`
  });
};
</script>

<style lang="scss" scoped>
.category-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 80px;
}

/* 搜索栏 */
.category-search {
  background-color: #07c160;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  
  &__box {
    height: 40px;
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  &__icon {
    margin-right: 8px;
    color: #999;
  }
  
  &__input {
    flex: 1;
    height: 40px;
    font-size: 15px;
  }
}

/* 分类标题 */
.category-header {
  padding: 0 16px;
  margin: 15px 0;
  
  &__content {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  &__title-area {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  
  &__title-line {
    width: 4px;
    height: 18px;
    background-color: #07c160;
    border-radius: 2px;
    margin-right: 8px;
  }
  
  &__title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
  }
  
  &__desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }
}

/* 筛选栏 */
.category-filter {
  display: flex;
  height: 50px;
  background-color: #fff;
  margin: 0 16px 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 0 5px;
  
  &__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 10px;
  }
  
  &__text {
    font-size: 14px;
    color: #666;
    transition: color 0.2s;
  }
  
  &__price {
    display: flex;
    align-items: center;
  }
  
  &__arrow {
    margin-left: 3px;
    font-size: 12px;
    color: #666;
    
    &--up {
      color: #07c160;
    }
  }
  
  &__indicator {
    position: absolute;
    bottom: 8px;
    width: 20px;
    height: 3px;
    background-color: #07c160;
    border-radius: 2px;
  }
  
  &__item--active {
    .category-filter__text {
      color: #07c160;
      font-weight: 500;
    }
  }
}

/* 服务列表 */
.category-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-item {
  &__card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  &__image {
    width: 100%;
    height: 160px;
  }
  
  &__content {
    padding: 15px;
  }
  
  &__title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  &__desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    line-height: 1.4;
  }
  
  &__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  &__price-box {
    display: flex;
    align-items: baseline;
  }
  
  &__price-symbol {
    font-size: 14px;
    color: #f56c6c;
    font-weight: 500;
  }
  
  &__price {
    font-size: 18px;
    color: #f56c6c;
    font-weight: bold;
    margin-right: 3px;
  }
  
  &__price-unit {
    font-size: 12px;
    color: #999;
  }
  
  &__sales {
    font-size: 12px;
    color: #999;
  }
}

/* 空状态 */
.category-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  
  &__image {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    opacity: 0.7;
  }
  
  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  &__title {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  &__desc {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
    text-align: center;
  }
  
  &__btn {
    background-color: #07c160;
    color: #fff;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 20px;
  }
}

/* 加载状态 */
.category-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  
  &__spinner {
    width: 30px;
    height: 30px;
    border: 2px solid #f0f0f0;
    border-top-color: #07c160;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
    margin-bottom: 10px;
  }
  
  &__text {
    color: #999;
    font-size: 14px;
  }
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
</style>
